import { reactive } from 'vue';

export const usePagination = (option?) => {
  option = option || {};
  const pagination = reactive({
    currentPage: option.currentPage || 1,
    pageSize: option.pageSize || 10,
    total: 0,
    limit: option.limit || 10,
    sizes: option.sizes || [10, 20, 30, 50]
  });

  function renderPaginate() {
    if (pagination.total === 0) {
      return <span></span>;
    }
    return (
      <el-pagination
        class="pagination-container"
        background
        layout="total, sizes, prev, pager, next"
        current-page={pagination.currentPage}
        page-size={pagination.pageSize}
        page-sizes={pagination.sizes}
        total={pagination.total}
        {...{
          'onUpdate:page-size': (v) => {
            pagination.pageSize = v;
          }
        }}
        {...{
          'onUpdate:current-page': (v) => {
            pagination.currentPage = v;
          }
        }}
      />
    );
  }

  return {
    pagination,
    renderPaginate
  };
};
